﻿
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>选择物资</title>
    <link href="css/style.css" rel="stylesheet">
    <script src="/js/vue2.js"></script>
    <script src="/js/axios.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f8f8;
            color: #333;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 90%;
            margin: 20px auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 12px;
            text-align: center;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
            color: #333;
        }
        .button-container {
            margin-top: 20px;
        }
        .material-button {
            padding: 10px 20px;
            margin: 5px;
            background-color: #336699;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .material-button:hover {
            background-color: #28527a;
        }
        .pagination {
            margin-top: 20px;
        }
        .pagination button {
            padding: 8px 16px;
            margin: 0 2px;
            background-color: #0070c0;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .pagination button:hover {
            background-color: #005f8a;
        }
        .pagination button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        .status-unconfirmed {
            color: red;
        }
        .status-confirmed {
            color: green;
        }
        .status-unknown {
            color: gray;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <center>
            <table align="center" border="0">
                <tr>
                    <td align="middle">
                        <font color="red">选择物资</font> ====&gt; 录入需求计划 ====&gt; 需求计划确认
                    </td>
                </tr>
            </table>
            <table cellspacing="1" cellpadding="0" bgcolor="#ffffff" border="0">
                <tr>
                    <td align="center">
                        <div>
                            共 {{ totalItems }} 个物资 每页 {{ pageSize }} 个物资 页次:<font color="blue">{{ pageNum }}</font>/{{ totalPages }}页 ◆</font>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table cellpadding="3" cellspacing="1" border="0" id="table1">
                            <tr class="t1">
                                <th>选择</th>
                                <th>序号</th>
                                <th>产品编码</th>
                                <th>产品名称</th>
                            </tr>
                            <tr class="t2" v-for="material in materials" :key="material.id">
                                <td align="center"><input type="checkbox" name="p_orderno" :value="material.id" v-model="selectedMaterials"></td>
                                <td>{{ material.id }}</td>
                                <td>{{ material.materialNum}}</td>
                                <td>{{ material.materialName }}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <div class="pagination">
                <button @click="prevPage" :disabled="pageNum === 1">上一页</button>
                <button @click="nextPage" :disabled="pageNum === totalPages">下一页</button>
            </div>
        </center>
        <div class="button-container" align="center">
            <button class="material-button" @click="fetchMaterials('W640')">晶振 W640</button>
            <button class="material-button" @click="fetchMaterials('W650')">CMOS电路 W650</button>
            <button class="material-button" @click="fetchMaterials('W651')">高速CMOS电路 W651</button>
            <button class="material-button" @click="fetchMaterials('W652')">TTL电路 W652</button>
        </div>
        <div align="center" style="margin-top: 20px;">
            请先选择物资，然后点击：
            <a href="javascript:void(0);" @click="nextStep"><u>下一步</u></a>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            materials: [], // 物资列表
            selectedMaterials: [], // 选中的物资ID
            pageNum: 1, // 当前页码
            pageSize: 5, // 每页数量
            totalItems: '', // 物资总数
            totalPages: 1, // 总页数
            currentCodePrefix: '', // 当前物资类型编码前缀
        },
        created() {
            // 初始加载默认的物资列表，可以默认加载某一类型的物资
            this.fetchMaterials('W640');
        },
        methods: {
            // 获取物资列表
            fetchMaterials(codePrefix) {
                this.currentCodePrefix = codePrefix;
                this.pageNum = 1; // 每次选择新物资类型时，重置分页
                this.loadMaterials();
            },
            // 加载当前页物资
            loadMaterials() {
                axios.get('/findMaterial', {
                    params: {
                        materialNumPrefix: this.currentCodePrefix,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                    }
                })
                    .then(response => {
                        // 假设返回的数据格式为 { materials: [], totalItems: 100 }
                        this.materials = response.data.data;
                        this.totalItems = response.data.total;
                        this.totalPages = Math.ceil(this.totalItems / this.pageSize);
                    })
                    .catch(error => {
                        console.error('查询出错：', error);
                    });
            },
            // 下一步操作
            nextStep() {
                if (this.selectedMaterials.length === 0) {
                    alert("请选择至少一条物资。");
                } else {
                    // 参数传递到需求计划录入页面
                    const selectedMaterialsStr = this.selectedMaterials.join(',');
                    window.location.href = `Order_newform.html?selectedMaterials=${selectedMaterialsStr}`;
                }
            },
            // 上一页
            prevPage() {
                if (this.pageNum > 1) {
                    this.pageNum--;
                    this.loadMaterials();
                }
            },
            // 下一页
            nextPage() {
                if (this.pageNum < this.totalPages) {
                    this.pageNum++;
                    this.loadMaterials();
                }
            },
        },
    });
</script>
</body>
</html>



